import React from 'react'
import { Breadcrumb } from 'antd'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import { actionCreators } from '../../store'
import './style.scss'

function Nav(props) {
  const { breadcrumb } = props
  const { Item } = Breadcrumb
  return (
    <div className="nav">
      {(typeof breadcrumb === 'string' || typeof breadcrumb === 'undefined') ? (
        <div className="page--title">{breadcrumb}</div>
      ) : (
        <Breadcrumb separator=">">
          {breadcrumb.map((item, index) => (
            <Item key={index}>{item.path ? <Link to={item.path}>{item.name}</Link> : <span>{item.name}</span>}</Item>
          ))}
        </Breadcrumb>
      )}
    </div>
  )
}

export default connect(state => ({
  breadcrumb: state.getIn(['common', 'breadcrumb'])
}), dispatch => ({
  setBreadcrumb(value) {
    dispatch(actionCreators.setBreadCrumb(value))
  }
}))(Nav)
